<!DOCTYPE html>
<html>
<head>
	<title>瀑布流</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.app {
			width: 100%;
			position: relative;
		}
		.item {
			width: calc(25% - 20px);
			padding: 10px;
			position: absolute;
			border: .5px solid #ccc;
		}
		.item>img {
			width: 100%;
			object-fit: cover;
		}
	</style>
</head>
<body>
<div class="app">
	<div class="item">
		<img src="img/1.jpg" alt="">
	</div>
	<div class="item">
		<img src="img/2.jpg" alt="">
	</div>
	<div class="item">
		<img src="img/3.jpg" alt="">
	</div>
	<div class="item">
		<img src="img/4.jpg" alt="">
	</div>
		<div class="item">
		<img src="img/5.jpg" alt="">
	</div>
	<div class="item">
		<img src="img/6.jpg" alt="">
	</div>
	<div class="item">
		<img src="img/7.jpg" alt="">
	</div>
	<div class="item">
		<img src="img/8.jpg" alt="">
	</div>
		<div class="item">
		<img src="img/9.jpg" alt="">
	</div>
	<div class="item">
		<img src="img/10.jpg" alt="">
	</div>
		<div class="item">
		<img src="img/1.jpg" alt="">
	</div>
	<div class="item">
		<img src="img/2.jpg" alt="">
	</div>
	<div class="item">
		<img src="img/3.jpg" alt="">
	</div>
	<div class="item">
		<img src="img/4.jpg" alt="">
	</div>
		<div class="item">
		<img src="img/5.jpg" alt="">
	</div>
	<div class="item">
		<img src="img/6.jpg" alt="">
	</div>
	<div class="item">
		<img src="img/7.jpg" alt="">
	</div>
	<div class="item">
		<img src="img/8.jpg" alt="">
	</div>
		<div class="item">
		<img src="img/9.jpg" alt="">
	</div>
	<div class="item">
		<img src="img/10.jpg" alt="">
	</div>
</div>
</body>
<script type="text/javascript">
	
var arrY = [0, 0, 0, 0];	
var maxHeight = 0, preNums = 0;
var data = [
	'img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg', 
	'img/5.jpg', 'img/6.jpg', 'img/7.jpg', 'img/8.jpg'
];


window.onload = function() {
	waterfill();
}


/* 添加滚动事件

	1. 判断是否滚动到了页面的底部
	2. 如果到了页面的底部，那么创建新的结点，插入到app中
	3. 将新添加的元素进行排列
*/
window.onscroll = function(e) {
	// 获取滚动的距离。兼容性处理
	var bottomSize = document.body.scrollTop || document.documentElement.scrollTop + document.documentElement.clientHeight;
	var app = document.getElementsByClassName('app')[0]

	
	if (bottomSize >= max(arrY) - 50) {
		for (var i = 0; i < data.length; i++) {
			var div = document.createElement('div');
			app.appendChild(div);
			div.className = 'item';
			var img = document.createElement('img');
			div.appendChild(img);
			img.src = data[i];
		}
		/* 数据的变动 
			1. divs集合发生后了变化，即总数发生了变化
		*/
		waterfill();
	}

} 


function waterfill() {
	var divs = document.getElementsByClassName('item');
	var width = divs[0].offsetWidth;
	var heig, index;			// 保存最小值、索引
	
	for (preNums; preNums < divs.length; preNums++) {	// preNums保存了上一个图片总数
		heig = min(arrY)[0];
		index = min(arrY)[1];
		// 设置页面的样式
		divs[preNums].style.left = width * index + 'px';
		divs[preNums].style.top = heig + 'px';
		// 跟新arrY的数据
		arrY[index] += divs[preNums].offsetHeight;
	}

}


function max(arr) {
	var max = 0;

	for (var i = 0; i < arr.length; i++) {
		
		if(max < arr[i]) {
			max = arr[i]
		}
	}

	return max;
}

function min(arr) {
	var index = 0;
	var min = arr[index];

	for (var i = 0; i < arr.length; i++) {
		if(min > arr[i]) {
			min = arr[i]
			index = i;
		}
	}

	return [min, index];
}

</script>
</html>